$('document').ready(function () {
    // 加载页面时触发的事件
    if (parseInt(getCookie('code')) !== 201) {
        window.location.href = "home.html"
    }
    clearCookie('outline-switch') //添加课程里补充大纲信息部分
    clearCookie('sourcebook-switch') //添加课程里补充教材信息部分
    clearCookie('outline-name')
    clearCookie('outline-sectionNum')
    clearCookie('outline-sectionName')
    clearCookie('sourcebook-isbn')
    clearCookie('sourcebook-name')
    clearCookie('sourcebook-author')
    clearCookie('sourcebook-press')
    // cname-input框事件
    $('#cname-input').blur(function () {
        if ($('#cname-input').val() == '') {
            $('#cname-input').css('border', '2px solid red')
            $('#cname-input').prop('placeholder', '课程名不能为空!')
        } else {
            $('#cname-input').css('border', '2px solid green')
        }
    })
    $('#cname-input').keyup(function () {
        if (($('#cname-input').val() !== '')) {
            $('#cname-input').css('border', '2px solid green')
        } else {
            $('#cname-input').css('border', '2px solid red')
            $('#cname-input').prop('placeholder', '课程名不能为空!')
        }

    })

    // ctype-input框事件
    $('#ctype-input').blur(function () {
        if ($('#ctype-input').val() == '') {
            $('#ctype-input').css({
                'border': '2px solid red',
            })
            $('#ctype-input').prop('placeholder', '课程类型不能为空!')
        } else if ($('#ctype-input').val().length > 0) {
            $('#ctype-input').css('border', '2px solid green')
        }
    })
    $('#ctype-input').keyup(function () {
        if ($('#ctype-input').val().length > 0) {
            $('#ctype-input').css('border', '2px solid green')
        } else {
            $('#ctype-input').prop('placeholder', '课程类型不能为空!')
            $('#ctype-input').css('border', '2px solid red')
        }

    })

    // outline-input框事件
    $('#outline-input').blur(function () {
        if ($('#outline-input').val() == '') {
            $('#outline-input').css({
                'border': '2px solid red',
            })
            $('#outline-input').prop('placeholder', '课程大纲不能为空!')
        } else if ($('#outline-input').val().length > 0) {
            $('#outline-input').css('border', '2px solid green')
        }
    })
    $('#outline-input').keyup(function () {
        if ($('#outline-input').val().length > 0) {
            $('#outline-input').css('border', '2px solid green')
        } else {
            $('#outline-input').prop('placeholder', '课程大纲不能为空!')
            $('#outline-input').css('border', '2px solid red')
        }

    })
    // 课程大纲补充详情
    $('#outline-input-a').click(function () {
        $('#myModal-public1').css('top', 0)
        $('#myModal-public1 h4').html('补充课程大纲')
        if (getCookie('outline-switch') == 1) {
            $('#myModal-public1').modal({
                backdrop: 'static',
                keyboard: false
            })
        } else {
            $('#myModal-public1-body').html(`
        大纲名：<input type="text" id="outline-name" placeholder="大纲的名称" value="` + $('#outline-input').val() + `">
        <br>
        <br>
        章节号：<input type="text" id="outline-sectionNum" placeholder="例如：“第二章第三节”">
        <br>
        <br>
        章节名：<input type="text" id="outline-sectionName" placeholder="例如：“选择器”">
        <br>
        `)
            $('#myModal-public1 .modal-footer').html(
                `
            <button type="button" class="btn btn-primary" id="outline-input-button">确认</button>
            <button type="button" class="btn btn-primary" id="outline-add">继续添加</button>
            <button type="button" class="btn" data-dismiss="modal">关闭</button>
            `
            )
            $('#myModal-public1').modal({
                backdrop: 'static',
                keyboard: false
            })
        }
    })

    // sourcebook-input框事件
    $('#sourcebook-input').blur(function () {
        if ($('#sourcebook-input').val() == '') {
            $('#sourcebook-input').css({
                'border': '2px solid red',
            })
            $('#sourcebook-input').prop('placeholder', '所使用教材不能为空!')
        } else if ($('#sourcebook-input').val().length > 0) {
            $('#sourcebook-input').css('border', '2px solid green')
        }
    })
    $('#sourcebook-input').keyup(function () {
        if ($('#sourcebook-input').val().length > 0) {
            $('#sourcebook-input').css('border', '2px solid green')
        } else {
            $('#sourcebook-input').prop('placeholder', '所使用教材不能为空!')
            $('#sourcebook-input').css('border', '2px solid red')
        }

    })
    // 教材补充详情
    $('#sourcebook-input-a').click(function () {
        $('#myModal-public2').css('top', 0)
        $('#myModal-public2 h4').html('补充教材信息')
        if (getCookie('sourcebook-switch') == 1) {
            $('#myModal-public2').modal({
                backdrop: 'static',
                keyboard: false
            })
        } else {
            $('#myModal-public2-body').html(`
        书号：<input type="text" id="sourcebook-isbn" placeholder="教材标准书号" value="` + getCookie('sourcebook-isbn') + `">
        <br>
        <br>
        书名：<input type="text" id="sourcebook-name" placeholder="书名" value="` + $('#sourcebook-input').val() + `">
        <br>
        <br>
        作者：<input type="text" id="sourcebook-author" placeholder="作者名" value="` + getCookie('sourcebook-author') + `">
        <br>
        <br>
        出版社:<input type="text" id="sourcebook-press" placeholder="出版社名" value="` + getCookie('sourcebook-press') + `">
        <br>
        `)
            $('#myModal-public2 .modal-footer').html(
                `
            <button type="button" class="btn btn-primary" id="sourcebook-input-button">确认</button>
            <button type="button" class="btn btn-primary" id="sourcebook-add">继续添加</button>
            <button type="button" class="btn" data-dismiss="modal">关闭</button>
            `
            )
            $('#myModal-public2').modal({
                backdrop: 'static',
                keyboard: false
            })
        }

    })

    // 大纲补充详情的点击事件
    var i = 0;
    var outlines = []
    $('#myModal-public1').on('mouseover', function () {
        $('#outline-add').off("click").click(function () {
            i++;
            k = i + 1;
            $('#myModal-public1-body').append(`
        <a href="#" id="zjremove` + k + `" value="` + k + `" class="iconfont icon-jian zjremove"></a>
        <p id="outline-name` + k + `">大纲名：<input type="text"></p>
        <p id="outline-sectionNum` + k + `">章节号：<input type="text"></p>
        <p id="outline-sectionName` + k + `">章节名：<input type="text"></p>
        `)
            $('#myModal-public1 .modal-footer').html(
                `
            <button type="button" class="btn btn-primary" id="outline-input-button1">确定</button>
            <button type="button" class="btn btn-primary" id="outline-add">继续添加</button>
            <button type="button" class="btn" btn-warning id="outline-warning">放弃添加</button>
            <button type="button" class="btn" data-dismiss="modal">关闭</button>
            `
            )
            // console.log($('.zjremove').size())
        })
        $('#outline-warning').off("click").click(function () {
            i = 0;
            clearCookie('outline-switch') //添加课程里补充大纲信息部分
            $('#myModal-public1-body').html(`
        大纲名：<input type="text" id="outline-name" placeholder="大纲的名称" value="` + $('#outline-input').val() + `">
        <br>
        <br>
        章节号：<input type="text" id="outline-sectionNum" placeholder="例如：“第二章第三节”" value="` + getCookie('outline-sectionNum') + `">
        <br>
        <br>
        章节名：<input type="text" id="outline-sectionName" placeholder="例如：“选择器”" value="` + getCookie('outline-sectionName') + `">
        <br>
        `)
            $('#myModal-public1 .modal-footer').html(
                `
            <button type="button" class="btn btn-primary" id="outline-input-button">确认</button>
            <button type="button" class="btn btn-primary" id="outline-add">继续添加</button>
            <button type="button" class="btn" data-dismiss="modal">关闭</button>
            `
            )
        })
        $('.zjremove').off("click").click(function () {
            var index = $('.zjremove').size()
            i = parseInt(index - 1)
            $('#zjremove' + parseInt(index + 1) + '').remove()
            $('#outline-name' + parseInt(index + 1) + '').remove()
            $('#outline-sectionNum' + parseInt(index + 1) + '').remove()
            $('#outline-sectionName' + parseInt(index + 1) + '').remove()
        })
        // 多个大纲的确定按钮
        $('#outline-input-button1').off('click').click(function () {
            var index = $('.zjremove').size()
            outlines = [{
                "name": $('#outline-name').val(),
                "section_num": $('#outline-sectionNum').val(),
                "section_name": $('#outline-sectionName').val()
            }]
            for (var i = 1; i < index + 1; i++) {
                outlines[i] = {
                    "name": $('#outline-name' + [i + 1] + ' input').val(),
                    "section_num": $('#outline-sectionNum' + [i + 1] + ' input').val(),
                    "section_name": $('#outline-sectionName' + [i + 1] + ' input').val()
                }
            }
            console.log(outlines)
            clearCookie('outline-name')
            clearCookie('outline-sectionNum')
            clearCookie('outline-sectionName')
            setCookie('outline-name', $('#outline-name').val())
            setCookie('outline-sectionNum',$('#outline-sectionNum').val())
            setCookie('outline-sectionName',$('#outline-sectionName').val())
            $('#outline-input').css('border', '2px solid green')
            $('#outline-input').val('' + getCookie('outline-name') + '')
            $('#myModal-public1').modal('hide')
            setCookie('outline-switch', 1)
        })
        // 就一个大纲章节的确定按钮
        $('#outline-input-button').off('click').click(function () {
            outlines = [{
                "name": $('#outline-name').val(),
                "section_num": $('#outline-sectionNum').val(),
                "section_name": $('#outline-sectionName').val()
            }]
            console.log(outlines)
            $('#outline-input').css('border', '2px solid green')
            clearCookie('outline-name')
            setCookie('outline-name', $('#outline-name').val())
            $('#myModal-public1').modal('hide')
            $('#outline-input').val('' + getCookie('outline-name') + '')
        })

    })

    // 教材补充详情的点击事件
    var y = 0;
    var sourcebooks = []
    $('#myModal-public2').on('mouseover', function () {
        $('#sourcebook-add').off("click").click(function () {
            y++;
            k = y + 1;
            $('#myModal-public2-body').append(`
        <a href="#" id="jcremove` + k + `" value="` + k + `" class="iconfont icon-jian jcremove"></a>
        <p id="sourcebook-isbn` + k + `">书号：<input type="text"></p>
        <p id="sourcebook-name` + k + `">书名：<input type="text"></p>
        <p id="sourcebook-author` + k + `">作者：<input type="text"></p>
        <p id="sourcebook-press` + k + `">出版社:<input type="text"></p>
        `)
            console.log($('.jcremove').size())
            $('#myModal-public2 .modal-footer').html(
                `
            <button type="button" class="btn btn-primary" id="sourcebook-input-button1">确定</button>
            <button type="button" class="btn btn-primary" id="sourcebook-add">继续添加</button>
            <button type="button" class="btn" btn-warning id="sourcebook-warning">放弃添加</button>
            <button type="button" class="btn" data-dismiss="modal">关闭</button>
            `
            )
        })
        $('#sourcebook-warning').off("click").click(function () {
            y = 0;
            clearCookie('sourcebook-switch') //添加课程里补充教材信息部分
            $('#myModal-public2-body').html(`
        书号：<input type="text" id="sourcebook-isbn" placeholder="教材标准书号">
        <br>
        <br>
        书名：<input type="text" id="sourcebook-name" placeholder="书名" value="` + $('#sourcebook-input').val() + `">
        <br>
        <br>
        作者：<input type="text" id="sourcebook-author" placeholder="作者名">
        <br>
        <br>
        出版社:<input type="text" id="sourcebook-press" placeholder="出版社名">
        <br>
        `)
            $('#myModal-public2 .modal-footer').html(
                `
            <button type="button" class="btn btn-primary" id="sourcebook-input-button">确认</button>
            <button type="button" class="btn btn-primary" id="sourcebook-add">继续添加</button>
            <button type="button" class="btn" data-dismiss="modal">关闭</button>
            `
            )
        })
        // 多个教材确定按钮
        $('#sourcebook-input-button1').off('click').click(function () {
            var index = $('.jcremove').size()
            sourcebooks = [{
                "isbn": $('#sourcebook-isbn').val(),
                "name": $('#sourcebook-name').val(),
                "author": $('#sourcebook-author').val(),
                "press": $('#sourcebook-press').val()
            }]
            for (var i = 1; i < index + 1; i++) {
                sourcebooks[i] = {
                    "isbn": $('#sourcebook-isbn' + [i + 1] + ' input').val(),
                    "name": $('#sourcebook-name' + [i + 1] + ' input').val(),
                    "author": $('#sourcebook-author' + [i + 1] + ' input').val(),
                    "press": $('#sourcebook-press' + [i + 1] + ' input').val(),
                }
            }
            console.log(sourcebooks)
            clearCookie('sourcebook-name')
            setCookie('sourcebook-name', $('#sourcebook-name').val())
            $('#sourcebook-input').val('' + getCookie('sourcebook-name') + '')
            $('#myModal-public2').modal('hide')
            setCookie('sourcebook-switch', 1)
        })
        $('.jcremove').off("click").click(function () {
            var index = $('.jcremove').size()
            y = parseInt(index - 1)
            $('#jcremove' + parseInt(index + 1) + '').remove()
            $('#sourcebook-isbn' + parseInt(index + 1) + '').remove()
            $('#sourcebook-name' + parseInt(index + 1) + '').remove()
            $('#sourcebook-author' + parseInt(index + 1) + '').remove()
            $('#sourcebook-press' + parseInt(index + 1) + '').remove()

        })
        $('#sourcebook-input-button').off('click').click(function () {
            sourcebooks = [{
                "isbn": $('#sourcebook-isbn').val(),
                "name": $('#sourcebook-name').val(),
                "author": $('#sourcebook-author').val(),
                "press": $('#sourcebook-press').val()
            }]
            clearCookie('sourcebook-isbn')
            clearCookie('sourcebook-name')
            clearCookie('sourcebook-author')
            clearCookie('sourcebook-press')
            setCookie('sourcebook-isbn', $('#sourcebook-isbn').val())
            setCookie('sourcebook-name', $('#sourcebook-name').val())
            setCookie('sourcebook-author', $('#sourcebook-author').val())
            setCookie('sourcebook-press', $('#sourcebook-press').val())
            $('#sourcebook-input').css('border', '2px solid green')
            $('#myModal-public2').modal('hide')
            $('#sourcebook-input').val('' + getCookie('sourcebook-name') + '')
        })
    })

    // 验证码
    var show_num = [];
    $(function () {
        draw(show_num); //加载验证码
        $("#canvas").on('click', function () {
            draw(show_num);
        })
    })

    function draw(show_num) {
        var context = canvas.getContext("2d"); //获取canvas画图的环境
        canvas.width = $('#canvas').width()
        canvas.height = $('#canvas').height()
        var sCode = "1,2,3,4,5,6,7,8,9,0";
        var aCode = sCode.split(",");
        var aLength = aCode.length; //获取到数组的长度

        for (var i = 0; i <= 3; i++) {
            var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
            var txt = aCode[j]; //得到随机的一个内容
            show_num[i] = txt;
            var x = 20 + i * 15; //文字在canvas上的x坐标
            var y = 26; //文字在canvas上的y坐标

            context.translate(x, y);
            context.font = '20px Aria'
            context.fillText(txt, 0, 0);
            context.translate(-x, -y);
        }
    }
    $("#canvas-code").bind({
        keyup: (function () {
            if ($(this).val().length == 4) {
                $(this).css('border', '2px solid green')
            } else {
                $('#password-input').prop('placeholder', '验证码位数错误!')
                $(this).css('border', '2px solid red')
            }
        }),
        blur: (function () {
            if ($(this).val().length == 4) {
                $(this).css('border', '2px solid green')
            } else {
                $('#password-input').prop('placeholder', '验证码位数错误!')
                $(this).css('border', '2px solid red')
            }
        })
    })
    // -------------------------------------------------------------

    // 确认添加课程
    $('#register').off('click').click(function () {
        if ($('#cname-input').val() !== '' && $('#ctype-input').val() !== '' && $('#outline-input').val() !== '' && $('#sourcebook-input').val() !== '' && $("#canvas-code").val() == show_num.join("")) {
            $.ajax({
                type: 'POST',
                url: 'http://111.229.120.67/tea/add-course',
                data: JSON.stringify({
                    "cname": $('#cname-input').val(),
                    "ispublic": Boolean($('#ctype-input').val()),
                    "outlines": outlines,
                    "textbooks": sourcebooks
                }),
                xhrFields: {
                    withCredentials: true
                },
                contentType: 'application/json',
                success: function (data) {
                    console.log(data)
                    if (data.statusCode == 0) {
                        $('#myModal-public').modal({})
                        $('#myModal-public h4').html('添加成功')
                        $('#myModal-public-body').html('成功添加课程：' + $('#cname-input').val() + '')
                        setTimeout(function () {
                            window.location.href = "course-list.html"
                        }, 1000)
                    } else {
                        $('#myModal-public').modal({})
                        $('#myModal-public h4').html('添加失败')
                        $('#myModal-public-body').html('添加失败，请重试')
                    }
                }
            })
            console.log({
                "cname": $('#cname-input').val(),
                "ispublic": Boolean($('#ctype-input').val()),
                "outlines": outlines,
                "textbooks": sourcebooks
            })
        } else if ($('#cname-input').val() == '') {
            $('#cname-input').prop('placeholder', '课程名称不能为空!')
            $('#cname-input').css('border', '2px solid red')
        } else if ($('#ctype-input').val() == '') {
            $('#ctype-input').prop('placeholder', '课程类别不能为空!')
            $('#ctype-input').css('border', '2px solid red')
        } else if ($('#outline-input').val() == '') {
            $('#outline-input').prop('placeholder', '课程大纲不能为空!')
            $('#outline-input').css('border', '2px solid red')
        } else if ($('#sourcebook-input').val() == '') {
            $('#sourcebook-input').prop('placeholder', '所使用教材不能为空!')
            $('#sourcebook-input').css('border', '2px solid red')
        } else if ($("#canvas-code").val() == '' || $("#canvas-code").val() != show_num.join("")) {
            $('#canvas-code').css({
                'border': '2px solid red',
            })
            $('#canvas-code').prop('placeholder', '验证码错误!')
            draw(show_num)
            $("#canvas-code").val('')
        }
    })
    // --------------------------
})